<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/personal.css">
  <title>个人中心</title>
</head>
<body>
  <!-- 个人中心头部开始 -->
  <div class="per_header">
    <div class="per_header_title clearfix">
      <div class="per_logo">
        <img src="../image/mymusic_img/demologo.png" alt="">
      </div>
      <ul>
        <li><a href="./index.html" id="index">首页</a></li>
        <li><a href="#">音乐馆</a></li>
        <li><a href="#">我的音乐</a></li>
        <li><a href="#">客户端</a></li>
        <li><a href="#">音乐号</a></li>
      </ul>
      <input type="text" placeholder="搜索音乐、歌手、MV、歌单" name="search" value="" autocomplete="off" maxlength="16" class="search">
      <input type="button" class="btn">
    </div>
  </div>
  <!-- 个人中心主体部分 -->
  <div class="personal_cont">
    <div class="personal_set">
      <p>个人设置</p>
      <ul>
        <li onclick="basisset()" id="s1">基本设置</li>
        <li onclick="privacyset()" id="s2">隐私设置</li>
      </ul>
      <div class="basis" id="basis">
        <ul>
          <li>
            <label for="uname">用户名:</label>
            <input type="text" autocomplete="off" id="uname" name="uname" class="uname" readonly>
          </li>
          <li>
            <label for="originalupwd">原密码:</label>
            <input type="password" name="originalupwd" id="originalupwd" maxlength="16">
          </li>
          <li>
            <label for="newupwd">新密码:</label>
            <input type="password" name="newupwd" id="newupwd" maxlength="16">
          </li>
          <li>
            <label for="newupwd">确认密码:</label>
            <input type="password" name="confirmupwd" id="confirmupwda" maxlength="16">
          </li>
          <li>
            <label>性别:</label>
            <div class="sex">
              <input type="radio" name="sex" value="1" checked>男
              <input type="radio" name="sex" value="0">女
              <input type="radio" name="sex" value="-1">保密
            </div>
          </li>
          <li>
            <label>生日:</label>
            <div class="time">
              <select name="year" id="year"></select>年
              <select name="year" id="month"></select>月
              <select name="year" id="day"></select>日
            </div>
          </li>
          <li>
            <label>地区:</label>
            <div class="city">
              <select name="provinces"></select>
              <select name="citys">
                <option value="">请选择城市</option>
              </select>
            </div>
          </li>
          <li>
            <label for="introduce">介绍:</label>
            <textarea name="introduce" id="introduce"></textarea>
          </li>
          <li>
            <div>
              <a href="javascript:;">保存</a>
              <a href="javascript:;">取消</a>
            </div>
          </li>
        </ul>
        <div class="userpic">
          <img src="../image/personal_img/user_photo.png" alt="">
          <a href="javascript:;" class="replace" id="replace">更换头像</a>
        </div>
      </div>
      <div class="privacy" id="privacy">
        <div class="item item1">
          <h3>
            <span class="f-fs1">私信</span>
            <span class="sub">接收新私信提醒</span>
          </h3>
          <ul>
            <li><input type="radio" value="1" checked name="focus">所有人</li>
            <li><input type="radio" value="0" name="focus">我关注的人</li>
          </ul>
        </div>
        <div class="item item2">
          <h3><span class="f-fs1">通知</span></h3>
          <ul>
            <li><input type="checkbox">歌单被收藏</li>
            <li><input type="checkbox">视频被收藏</li>
            <li><input type="checkbox">电台被订阅</li>
            <li><input type="checkbox">收到赞</li>
            <li><input type="checkbox">新粉丝</li>
          </ul>
        </div>
        <div class="item item3">
          <h3><span class="f-fs1">听歌排行</span></h3>
          <ul>
            <li><input type="radio" value="1" checked name="all">所有人可见</li>
            <li><input type="radio" value="0" checked name="all">仅自己可见</li>
          </ul>
        </div>
        <div class="item item3">
          <h3><span>个性化服务</span></h3>
          <ul>
            <li><input type="radio" name="personalized" value="1">开启</li>
            <li><input type="radio" name="personalized" value="0">关闭(关闭后，将不会使用你的个性信息提供个性化服务)</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部开始 -->
<div class="footer">
  <div class="footer_cont clearfix">
    <div class="footer_cont_left">
      <ul class="clearfix">
        <li><a href="#">关于我们</a></li>
        <li><a href="#">版权声明</a></li>
        <li><a href="#">诚聘英才</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">历史合作</a></li>
        <li><a href="#">唱片公司</a></li>
        <li><a href="#">广告服务</a></li>
        <li><a href="#">友情连接</a></li>
        <li class="cont_left_end"><a href="#">帮助中心</a></li>
      </ul>
      <p>Copyright&nbsp;&copy;2021&nbsp;HuanTingMusic&nbsp;All&nbsp;Rights&nbsp;Reserved</p>
    </div>
    <div class="footer_cont_right">
      <ul>
        <li class="cont_right_start">关注我们</li>
        <li><a href="#"><img src="../image/personal_img/index1.png" alt=""></a></li>
        <li><a href="#"><img src="../image/index_img/index2.png" alt=""></a></li>
        <li>
          <a href="#"><img src="../image/personal_img/index3.png" alt=""></a>
          <div><img src="../image/personal_img/wx.jpg" alt=""></div>
        </li>
        <li><a href="#"><img src="../image/personal_img/index4.png" alt=""></a></li>
        <li><a href="#"><img src="../image/personal_img/index5.png" alt=""></a></li>
      </ul>
    </div>
  </div>
</div>
</body>
<script src="../js/personal_js/personal.js"></script>
<script src="../js/personal_js/switch.js"></script>
<script src="../js/personal_js/perData.js"></script>
</html>